<%@ page language="java" contentType="text/html; utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<html>
<head>
    <title>查看所有用户</title>

    <link href="../layui/css/layui.css" type="text/css" rel="stylesheet">
    <%--layui设置table行高度的方法--%>
    <style type="text/css">
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/1.10.0/jquery.js"></script>
    <script src="../layui/layui.js" type="text/javascript"></script>

    <script type="text/javascript">

        layui.use('table', function () {
            var table = layui.table;
            //执行一个laypage实例
            table.render({
                elem: "#myTable",//写id选择器
                //SpringBoot中直接请求showall,在SpringMVC中请求showall.do
                url: "${pageContext.request.contextPath}/user/listUser",//数据接口，请求的地址
                page: true,//开启分页
                width: 1230,
                //开启table表格头部的工具栏区域
                toolbar: '#myToolbar',//id选择器

                //列
                cols: [[
                    {type: "checkbox"},
                    {title: "编号", field: "userId"},
                    {title: "图片", field: "userImage", templet: "#img"},
                    {title: "用户名字", field: "userName"},
                    {title: "用户昵称", field: "userNickName"},
                    {title: "性别", field: "userSex", width: 60},
                    {title: "所在省份", field: "userProvince"},
                    {title: "所在城市", field: "userCity"},
                    {title: "注册时间", field: "userCreateTime"},
                    {title: "用户状态", field: "userStatus", templet: "#status"},
                    {title: "操作", templet: "#caozuo"}

                ]]
            });
        });


        //搜索操作
        function doSearch() {
            //1.得到input输入框中的值
            var userName = $("#userName").val();
            //2.发送请求，接受数据
            //使用table模块
            layui.use('table', function () {
                var table = layui.table;
                //reload方法完成数据的重新加载
                table.reload("myTable", {
                    where: {"name": userName}//发送的额外参数
                })
            })
        }


        //冻结或者解冻一个用户对象
        function toFrozen(id, status) {
            //    alert(id+"---"+status);
            layui.use("table", function () {
                //获取table,用于下面重新加载表格信息，也即是刷新
                var table = layui.table;

                if (confirm("确认要进行此操作吗？")) {
                    $.ajax({
                        url: "${pageContext.request.contextPath}/user/updateUser",
                        data: {"id": id, "status": status},
                        success: function (data) {
                            alert("操作成功！");
                            table.reload("myTable");
                        }
                    })
                }
            })
        }


        //批量下载用户-批量导出Excel
        function multiDownloadUser() {
            //    alert(id+"---"+status);
            layui.use("table", function () {
                //获取table,用于下面重新加载表格信息，也即是刷新
                var table = layui.table;

                if (confirm("确认要进行此操作吗？")) {
                    $.ajax({
                        url: "${pageContext.request.contextPath}/user/multiDownloadUser",
                        success: function () {
                            alert("操作成功！");
                            table.reload("myTable");
                        }
                    })
                }
            })
        }



    </script>


    <script type="text/html" id="caozuo">
        {{#  if(d.userStatus == 0){ }}
        <button type="button" class="layui-btn-sm layui-btn-radius layui-btn-danger"
                onclick="toFrozen('{{d.userId}}',1)">
            冻结
        </button>
        {{#  } else { }}
        <button type="button" class="layui-btn-sm layui-btn-radius layui-btn-normal"
                onclick="toFrozen('{{d.userId}}',0)">
            正常
        </button>
        {{#  } }}
    </script>

    <%--添加展示所有的图片路径--%>
    <script type="text/html" id="img">
       <%-- <img src="${pageContext.request.contextPath}{{d.userImage}}" style="height: 35px;width: 35px;"/>--%>
       <img src="{{d.userImage}}" style="height: 35px;width: 35px;"/>
    </script>
    <%--上师状态的判断--%>
    <script type="text/html" id="status">
        {{#  if(d.userStatus == 1){ }}
        冻结
        {{#  } else { }}
        正常
        {{#  } }}
    </script>


</head>

<body>
<%--table表格放在body最上面--%>
<table id="myTable"></table>

<%--templet选择器--%>
<div id="myToolbar" style="display: none">
    <%--<button type="button" class="layui-btn-sm layui-btn-radius layui-btn-normal"
            onclick="multiDownloadUser()">
        批量下载
    </button>--%>
    <%--组装行内表单--%>
    <div class="layui-inline">
        <div class="layui-input-inline" style="width: 200px;">
            <input type="text" class="layui-input" placeholder="请输入用户名称" id="userName">
        </div>
        <div class="layui-input-inline" style="width: 100px;">
            <button type="button" class="layui-btn-sm layui-btn-radius layui-btn-normal" onclick="doSearch()">
                <i class="layui-icon layui-icon-search"></i> 搜索
            </button>
        </div>
    </div>
</div>

</body>
</html>
